<template>
  <div class="sidebar">
    <div class="logo">
      <a href="#">
        <img src="./logo.png" alt="lo+go">
      </a>
    </div>
    <ul class="nav-menu nav-menu-1" v-for="(item, i) in items">
      <router-link class="first-item" :to="{path: item.index}" tag="li">
        <i class="icon folder" id="first-icon" @click="toggleFirst($event,i)"></i>
        <span class="text">{{item.title}}</span>
        <ul class="nav-menu nav-menu-2" v-for="(sub, i) in item.subs" style="display: none">
          <router-link class="second-item" id="second-item" :to="{path: sub.index}" tag="li" v-if="sub.thds">
            <i class="icon folder" id="second-icon" @click="toggleSecond(i)"></i>
            <span class="text sec">{{sub.title}}</span>
            <ul class="nav-menu nav-menu-3" v-for="(thd, i) in sub.thds" v-show="openSecond">
              <router-link class="third-item" :to="{path: thd.index}" tag="li">
                <i class="icon file-text"></i>
                <span class="text thd">{{thd.title}}</span>
              </router-link>
            </ul>
          </router-link>
        </ul>
      </router-link>
    </ul>
  </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    data () {
      return {
        openFirst: false,
        openSecond: false,
        items: [
          {
            title: '基础',
            index: '/basic',
            subs: [
              {
                title: '产品测试',
                index: '/basic/productTest/query',
                thds: [
                  {
                    title: '查询',
                    index: '/basic/productTest/query'
                  },
                  {
                    title: '添加',
                    index: '/basic/productTest/insert'
                  }
                ]
              }
            ]
          },
          {
            title: '业务',
            index: '/extension'
          }
        ]
      }
    },
    methods: {
      toggleFirst (event) {
        let $menuSec = $('.nav-menu-2')
        let $iconFir = $('#first-icon')
        if ($menuSec.css('display') === 'none') {
          $menuSec.slideDown()
          $iconFir.removeClass('folder').addClass('folder-open')
        } else {
          $menuSec.slideUp()
          $iconFir.removeClass('folder-open').addClass('folder')
        }
      },
      toggleSecond () {
        let $menuThd = $('.nav-menu-3')
        let $iconSec = $('#second-icon')
        if ($menuThd.css('display') === 'none') {
          $menuThd.slideDown()
          $iconSec.removeClass('folder').addClass('folder-open')
        } else {
          $menuThd.slideUp()
          $iconSec.removeClass('folder-open').addClass('folder')
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
  .sidebar
    width 200px
    min-height 100vh
    background: #324157
    overflow: hidden
    .logo
      position: relative
      width: 200px
      height: 60px
      display: inline-block
      & > a
        display: block
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        width: 130px
        height: 28px
    .nav-menu
      border-radius: 2px
      padding-left: 0
      .first-item
        padding: 0 20px
        .second-item
          padding-left: 20px
          .third-item
            padding-left: 20px
      .text
        height: 46px
        line-height: 46px
        font-size: 14px
        color: rgb(191, 217, 204)
        &.sec
          height: 36px
          line-height: 36px
        &.thd
          height: 30px
          line-height: 30px
          font-size: 12px
          min-width: 200px
      .icon
        display: inline-block
        width: 16px
        height: 16px
        margin-right: 2px
        background-size: 16px 16px
        background-repeat: no-repeat
        vertical-align: middle
        cursor pointer
        &.folder
          background: url(./folder-close.png)
        &.folder-open
          background: url(./folder-open.png)
        &.file-text
          background: url(./file.png)
</style>
